<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <title>展示</title>
</head>
<body>
<body>
<div id="ckk">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="时间范围">
            <div class="block">
                <el-date-picker
                        v-model="searchForm.orderSpacerecordTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="入库时间"
                        end-placeholder="出库时间"
                        value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </div>
        </el-form-item>
        <el-form-item label="车位号">
            <el-input v-model="searchForm.orderParkspaceNum" placeholder="车位号"></el-input>
        </el-form-item>
        <el-form-item label="每页显示条数">
            <el-select v-model="searchForm.pageSize" placeholder="">
                <el-option label="2" value="2"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="10" value="10"></el-option>
                <el-option label="20" value="20"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column
                label="序号"
                type="index"
                :index="indexMethod">
        </el-table-column>
        <el-table-column prop="orderLicense" label="车牌号" width="80">
        </el-table-column>
        <el-table-column prop="orderParkspaceId">
        </el-table-column>
        <el-table-column prop="orderSpacerecordTimeStart" label="入场时间" width="180">
        </el-table-column>
        <el-table-column prop="orderSpacerecordTimeEnd" label="出场时间" width="180">
        </el-table-column>
        <el-table-column prop="orderInImg" label="车辆入场图片">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.orderInImg">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column prop="orderOutImg" label="车辆出场图片">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.orderOutImg">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column prop="orderParkAddress" label="车场">
        </el-table-column>
        <el-table-column prop="orderParkspaceNum" label="车位号">
        </el-table-column>
        <el-table-column prop="orderParkspaceStatus" label="车辆停车状态">
            {{action}}
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-row>
                    <el-button @click="checkClick(scope.row)" type="primary" size="big">查看</el-button>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            layout="prev, pager, next"
            :total="totalCount" :page-size="pageSize" :current-page="curr" @current-change="jump">
    </el-pagination>

</div>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#ckk',
        data: {
            tableData: [],
            fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            action: '',
            searchForm: {
                orderSpacerecordTime: '',
                orderParkspaceNum: '',
                pageSize: ''
            },
            totalCount: 0,
            //当前页
            curr: 1,
            pageSize: 2,

        },
        methods: {
            indexMethod(index) {
                return index * 1;
            },
            onSubmit: function () {
                var f = this.searchForm;
                var vm = this;
                var params = {
                    orderParkspaceId: f.orderParkspaceNum,
                    orderSpacerecordTimeStart: f.orderSpacerecordTime[0],
                    orderSpacerecordTimeEnd: f.orderSpacerecordTime[1],
                    pageSize: f.pageSize
                }
                console.log(f.pageSize);

                this.doQuery(params);
            },

            changeStatus(status) {
                var k = this;
                if (status == 0) {
                    k.action = "已预订";
                }
                if (status == 1) {
                    k.action = "已驶入";
                }
                if (status == 2) {
                    k.action = "已驶离";
                }
                if (status == 3) {
                    k.action = "已取消";
                }
            },
            checkClick: function (par) {
                window.location.href = "/text.html";
                sessionStorage.setItem("PICURL", par.orderInImg)
                sessionStorage.setItem("PARKID", par.orderInImg)

            },
            jump: function (curr) {
                var f = this.searchForm;
                var vm = this;
                var params = {
                    orderParkspaceId: f.orderParkspaceNum,
                    orderSpacerecordTimeStart: f.orderSpacerecordTime[0],
                    orderSpacerecordTimeEnd: f.orderSpacerecordTime[1],
                    pageIdx: curr,
                    pageSize: vm.pageSize
                }
                this.doQuery(params)
            },
            doQuery: function (params) {
                var vm = this;
                axios.get('order/show', {params: params})
                    .then(function (resp) {
                        if (resp.data.success) {
                            vm.tableData = resp.data.object.records;
                            for (let j = 0; j < resp.data.object.records.length; j++) {
                                var status = resp.data.object.records[j].orderParkspaceStatus;
                                vm.changeStatus(status);
                            }
                            vm.totalCount = resp.data.object.total;
                            vm.curr = resp.data.object.current;
                            vm.pageSize = resp.data.object.size;
                        }
                    })
            },
        },

        mounted: function () {
            var params = {};
            this.doQuery(params);
        }
    })
</script>
</body>
</body>
</html>